<!DOCTYPE html>
<html lang="zh-CN">
<head>            
    <#include "/manage/common/head.html" />        
    
</head>
<body>
<!--顶部导航-->
<#include "/demo/common/navbar.html" />
<!--主内容-->
<div class="page-content">
    <!--侧边菜单-->
    <#include "/demo/common/sidebar.html" />
    <!--正文内容-->
    <div class="content-wrapper">
        <div class="container-fluid">
            <div class="content">
                <div class="page-title">
                    <h3>个人信息</h3>
                </div>
                <div class="page-body">                    
                    <form action="" method="POST" class="form-horizontal" role="form">
                        <div class="form-group">                            
                            <label class="col-sm-2 control-label">用户名(*)</label>
                            <div class="col-sm-10">                                
                                <input type="text" name="loginName" class="form-control" value="" title="">
                                <span class="help-block">用户名必由数字、字母、中文组成，长度为4-20位</span>                                                                    
                            </div>                            
                        </div>   
                        <div class="form-group">                            
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">                                
                                <input type="password" name="password" class="form-control" value="" title="">
                                <span class="help-block">密码可以由数字、字母组成，长度为6-20位</span>                                                                    
                            </div>                            
                        </div>   
                        <div class="form-group">                            
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-10">                                
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="gender" value="" checked="checked">
                                        男
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="gender" value="" checked="checked">
                                        女
                                    </label>
                                </div>
                            </div>                            
                        </div>            
                        <div class="form-group">                                                        
                            <label class="col-sm-2 control-label">学历</label>
                            <div class="col-sm-10">                                
                                <select name="education" class="form-control">
                                    <option value="">-- Select One --</option>
                                    <option value="">博士</option>
                                    <option value="">硕士</option>
                                    <option value="">本科</option>
                                    <option value="">大专</option>                                    
                                    <option value="">高中</option>
                                    <option value="">中学</option>
                                </select>                                
                            </div>                            
                        </div>       
                        <div class="form-group">                        
                            <label class="col-sm-2 control-label">简介</label>
                            <div class="col-sm-10">                                
                                <textarea name="introduce" class="form-control" rows="3" ></textarea>                                
                            </div>                                
                        </div>   
                        <div class="form-group">
                            <label class="col-sm-2 control-label">标签</label>
                            <div class="col-sm-10">
                                <select name="tag" class="form-control" multiple></select>
                            </div>    
                        </div>  
                        <div class="form-group">
                            <label class="col-sm-2 control-label">照片</label>
                            <div class="col-sm-10">
                                <span class="btn btn-success fileinput-button">
                                    <i class="fa fa-plus"></i>
                                    <span>选择文件</span>
                                    <input id="fileUpload" type="file" name="files[]" multiple>
                                </span>
                                <span id="progress"></span>
                                <div id="files" class="files"></div>

                            </div>
                        </div>                                             
                        <!--<div class="form-group">
                            <div class="col-sm-10 col-sm-offset-2">
                                <button type="submit" class="btn btn-success">保存信息</button>
                                <div class="pull-right">
                                    <button type="button" class="btn btn-default">取消</button>
                                </div>
                            </div>
                        </div>-->
                        <div class="form-action">
                            <button type="submit" class="btn btn-success">保存信息</button>
                            <div class="pull-right">
                                    <button type="button" class="btn btn-default">取消</button>
                                </div>
                        </div>
                    </form>                    
                </div>
                <div class="page-footer"></div>
            </div>           
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    $(function(){
        $("select[name='education']").select2();

        $("select[name='tag']").select2({
            tags: true,
            tokenSeparators: [',', ' ']
        });   

        $("#fileUpload").fileupload({
            url: "${request.contextPath}/manage/fileUpload",
            dataType: "json",
//            autoUpload: false
            done: function(e, data){
                alert(data.result);
            }
        }).on("fileuploadadd", function(e, data){
            data.context = $("<div/>").appendTo("#files");
            $.each(data.files, function(index, file){
                var node = $("<p/>").append($("<span/>").text(file.name));
                node.appendTo(data.context);
            });
        }).on("fileuploadprocessalways", function(e, data) {
            var index = data.index,
                    file = data.files[index],
                    node = $(data.context.children()[index]);
            if (file.preview){
                node.prepend("<br>").prepend(file.preview);
            }
        }).on("fileuploadprogressall", function(e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $("#progress").html(progress);
        }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');

        $("form").bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                loginName: {
                    validators: {
                        notEmpty: {
                            message: "用户名不能为空！"
                        }
                    }
                }            
            }          
        });  
    });
</script>